<template>
  <div class="win">
    <!-- 顶部栏 -->
    <div class="user_data_box">
      <div class="setting_box" @click="hr_settings">
        <img class="home_star" v-if="bjurl" :src="bjurl+'home_star.png'" />
        <p>账号设置</p>
        <!-- <button  open-type="getPhoneNumber" @getphonenumber="getUserInfo">登录/注册</button> -->
        <img class="right_logo" src="/static/img/home_right_logo.png" />
      </div>
      <div class="user_top">
        <div class="user_head">
          <img
            class="user_head"
            v-if="userPhone==''||userPhone==null||userPhone==undefined"
            src="/static/img/home_head_logo.png"
          />
          <open-data v-else type="userAvatarUrl" class="user_head"></open-data>
        </div>
        <div class="visitor_box" v-if="userPhone==''||userPhone==null||userPhone==undefined">
          <button
            v-if="nickName==''||nickName==undefined"
            class="getUserInfo"
            open-type="getUserInfo"
            @getuserinfo="getUserInfo"
          >登录</button>
          <p v-else @click="hr_login">登录</p>
        </div>
        <div class="column_box" v-else>
          <p class="user_name ellipsis" v-if="member_type==1">{{userData.store_name}}</p>
          <open-data type="userNickName" v-else class="user_name" lang="zh_CN"></open-data>
          <p class="mode" v-if="member_type==1">合作门店</p>
          <p class="mode" v-else>游客</p>
        </div>
      </div>
      <div class="user_bottom">
        <div class="item" @click="hr_myCollect">
          <p class="number">{{userData.collection_num}}</p>
          <p>我的收藏</p>
        </div>
        <div class="item" @click="hr_coupon">
          <p class="number" v-if="userPhone==''||userPhone==null||userPhone==undefined">0</p>
          <p class="number" v-else>{{userData.voucher_num}}</p>
          <p>优惠券</p>
        </div>
        <div class="item" @click="hr_integralRecord(userData.integral_num)">
          <p class="number" v-if="userPhone==''||userPhone==null||userPhone==undefined">{{0}}</p>
          <p class="number" v-else>{{userData.integral_num}}</p>
          <p>我的积分</p>
        </div>
      </div>
    </div>
    <!-- 待付款/待发货/待收货/我的订单 -->
    <div class="nav_list_box">
      <div class="nav_list row_bet_cen">
        <div
          class="item colum_cen"
          @click="hr_myOrder(index)"
          v-for="(item, index) in navList"
          :key="index"
        >
          <p
            class="number"
            v-if="userData.payment_num != 0&&index==0&&userPhone!=''"
          >{{userData.payment_num}}</p>
          <p
            class="number"
            v-if="userData.shipp_num != 0&&index==1&&userPhone!=''"
          >{{userData.shipp_num}}</p>
          <p
            class="number"
            v-if="userData.receive_num != 0&&index==2&&userPhone!=''"
          >{{userData.receive_num}}</p>
          <img :src="item.img" />
          <p>{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- 积分兑换 -->
    <div class="home_banner">
      <img v-if="integralBanner[0]" :src="integralBanner[0].src" mode="widthFix" />
      <button v-if="integralBanner[0]" @click="hr_integralStore">立即兑换</button>
    </div>
    <!-- 5个竖向导航栏 -->
    <div class="tab_box">
      <div class="item" @click="hr_tab(item)" v-for="(item, index) in tabData" :key="index">
        <div class="item_left_row">
          <img :src="item.img" />
          <p>{{item.name}}</p>
        </div>
        <img class="right_logo" src="/static/img/home_right_logo2.png" />
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      userData: {},
      navList: [],
      tabData: [],
      integralBanner: [],
      userPhone: "", //缓存用户手机号
      member_type: "", //缓存用户类型1是合作门店，2是游客
      nickName: "" //缓存用户昵称
    };
  },
  components: {},
  methods: {
    //请求接口我的页
    getHome() {
      this.$ajax("/home/mine/me_index", "post", {})
        .then(res => {
          if (res.status) {
            this.userData = res.data;
          } else {
          }
        })
        .catch(err => {});
    },
    // 请求接口banner
    getBanner() {
      this.$ajax("/home/home/banner", "post", {
        mark: "socardIntegral"
      })
        .then(res => {
          if (res.status) {
            this.integralBanner = res.data;
          } else {
          }
        })
        .catch(err => {});
    },
    // 请求接口获取昵称
    postNickName() {
      this.$ajax("/home/Login/getNickName", "post", {
        nickName: wx.getStorageSync("nickName")
      })
        .then(res => {
          

          if (res.status) {
          } else {
          }
        })
        .catch(err => {});
    },
    //跳转到我的收藏
    hr_myCollect() {
      wx.navigateTo({
        url: "../myCollect/main"
      });
    },
    //跳转到优惠券
    hr_coupon() {
      this.$selectPhone(this.userPhone, "coupon");
    },
    //跳转到积分记录
    hr_integralRecord(integral_num) {
      this.$selectPhone(
        this.userPhone,
        "integralRecord",
        "integral_num",
        integral_num
      );
    },
    //跳转到积分兑换
    hr_integralStore() {
      wx.navigateTo({
        url: "../integralStore/main"
      });
    },
    //跳转到我的订单
    hr_myOrder(index) {
      this.$selectPhone(this.userPhone, "myOrder", "current", index);
      // wx.navigateTo({
      //   url: "../myOrder/main?current=" + index
      // });
    },
    //拨打电话
    call() {
      wx.makePhoneCall({
        phoneNumber: this.userData.phone
      });
    },
    // 跳转到竖向菜单
    hr_tab(item) {
      if (
        this.userPhone == "" ||
        this.userPhone == null ||
        this.userPhone == undefined
      ) {
        this.$toast({
          content: "请先登录~"
        });
      } else if (item.path == "phone") {
        this.call();
        return;
      } else if (item.path == "staffManagement" && this.member_type == 2) {
        this.$toast({
          content: "请先申请合作门店~"
        });
      } else {
        wx.navigateTo({
          url: "../" + item.path + "/main"
        });
      }
    },
    //跳转到账号设置
    hr_settings() {
      if (
        this.userPhone != "" &&
        this.userPhone != null &&
        this.userPhone != undefined
      ) {
        wx.navigateTo({
          url: "../settings/main"
        });
      } else
        this.$toast({
          content: "请先登录/注册"
        });
    },
    // 跳转到登录
    hr_login() {
      // wx.reLaunch({
      //   url: "../login/main"
      // });
      wx.navigateTo({
        url: "../login/main?member_type=" + this.member_type
      });
    },
    // 判断是不是游客
    judgeMenber() {
      let member_type = wx.getStorageSync("member_type");
    },
    getUserInfo() {
      wx.getUserInfo({
        success: res => {
          wx.setStorageSync("nickName", res.userInfo.nickName);
          this.postNickName();
          this.$forceUpdate();
          this.hr_login();
        },
        fail: err => {
          this.$toast({
            content: "取消授权"
          });
        }
      });
    }
  },
  onShow() {
    this.getHome();
    this.nickName = wx.getStorageSync("nickName");
    this.member_type = wx.getStorageSync("member_type");
    this.userPhone = wx.getStorageSync("phone");
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.getBanner();
    this.navList = navList;
    this.bjurl = this.$bjurl;
    this.tabData = tabData;
  }
};
let imgurl = "https://socard.busypi.com/web_img/"
let navList = [
  {
    img: imgurl+"home_pay.png",
    name: "待付款"
  },
  {
    img: imgurl+"home_delivery.png",
    name: "待发货"
  },
  {
    img: imgurl+"home_take_over.png",
    name: "待收货"
  },
  {
    img: imgurl+"home_order.png",
    name: "我的订单"
  }
];
let tabData = [
  {
    img: imgurl+"home_QA_list.png",
    name: "我的质保单",
    path: "myWarrantyList"
  },
  {
    img: imgurl+"home_staff.png",
    name: "员工管理",
    path: "staffManagement"
  },
  {
    img: imgurl+"home_address.png",
    name: "收货地址",
    path: "shippingAddress"
  },
  {
    img: imgurl+"home_telephone.png",
    name: "客服电话",
    path: "phone"
  },
  {
    img: imgurl+"" + "home_about_us.png ",
    name: "关于我们",
    path: "aboutUs"
  }
];
</script>

<style lang="scss" scoped>
.win {
  padding-bottom: 40rpx;
  .user_data_box {
    position: relative;
    background-image: url($bjurl+"home_card_bj.png");
    background-size: 100% 100%;
    width: 690rpx;
    height: 350rpx;
    margin: 20rpx auto 30rpx;
    box-sizing: border-box;
    padding: 24rpx 0 0 35rpx;
    .setting_box {
      position: absolute;
      right: 0;
      top: 62rpx;
      padding: 0 10rpx 0 2rpx;
      height: 52rpx;
      background: rgba(255, 255, 255, 0.32);
      border-radius: 26rpx 0 0 26rpx;
      display: flex;
      align-items: center;
      .home_star {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
      }
      .right_logo {
        width: 13rpx;
        height: 20rpx;
        margin-left: 10rpx;
      }
      p {
        margin-left: 6rpx;
        font-size: 30rpx;
        color: #ffffff;
      }
      button {
        border: 0;
        margin-left: 6rpx;
        font-size: 30rpx;
        color: #ffffff;
        background-color: transparent;
      }
    }
    .user_top {
      display: flex;
      height: 126rpx;
      .user_head {
        width: 126rpx;
        height: 126rpx;
        border-radius: 63rpx;
        overflow: hidden;
      }
      .column_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16rpx 0 12rpx 18rpx;
        width: 510rpx;
        box-sizing: border-box;
        color: #ffffff;
        font-size: 32rpx;
        .user_name {
          font-size: 34rpx;
          width: 290rpx;
        }
        .mode {
          font-size: 26rpx;
        }
      }
      .visitor_box {
        padding: 16rpx 0 12rpx 24rpx;
        font-size: 40rpx;
        color: #ffffff;
        letter-spacing: 3rpx;
        display: flex;
        align-items: center;
        button {
          border: 0;
          font-size: 40rpx;
          color: #ffffff;
          letter-spacing: 3rpx;
          background-color: transparent;
        }
      }
    }
    .user_bottom {
      margin-top: 56rpx;
      display: flex;
      justify-content: space-between;
      padding: 0 80rpx 0 45rpx;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ffffff;
        font-size: 24rpx;
        .number {
          font-size: 40rpx;
          margin-bottom: 36rpx;
        }
      }
    }
  }
  .nav_list_box {
    padding: 22rpx 50rpx;
    border-radius: 10rpx;
    width: 713rpx;
    margin: 0 auto;
    background-color: #ffffff;
    box-sizing: border-box;
    position: relative;
    color: #4d4d4d;
    .nav_list {
      .item {
        position: relative;
        .number {
          position: absolute;
          left: 54rpx;
          top: 0rpx;
          font-size: 22rpx;
          color: #ffffff;
          background-color: #ff5a5f;
          padding: 4rpx 9rpx 3rpx;
          border-radius: 18rpx;
        }
        img {
          width: 78rpx;
          height: 78rpx;
          margin-bottom: 16rpx;
        }
      }
      :last-child {
        .number {
          left: 72rpx;
        }
      }
    }
  }
  .home_banner {
    position: relative;
    margin-top: 20rpx;
    button {
      position: absolute;
      left: 72rpx;
      bottom: 22rpx;
      width: 174rpx;
      height: 46rpx;
      line-height: 46rpx;
      background: linear-gradient(
        0deg,
        rgba(11, 208, 94, 1),
        rgba(11, 208, 173, 1)
      );
      border-radius: 23rpx;
      color: #ffffff;
      font-size: 28rpx;
    }
    img {
      width: 750rpx;
    }
  }
  .tab_box {
    margin-top: 20rpx;
    .item {
      width: 750rpx;
      height: 106rpx;
      margin-bottom: 2rpx;
      padding: 0 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      background-color: #ffffff;
      .item_left_row {
        display: flex;
        color: #898989;
        font-size: 30rpx;
        align-items: center;
        img {
          width: 53rpx;
          height: 53rpx;
          border-radius: 50%;
          margin-right: 28rpx;
        }
      }
      .right_logo {
        width: 12rpx;
        height: 22rpx;
      }
    }
  }
}
</style>
